<template>
	<div class="container">
		<el-card class="box-card">
			<el-descriptions
				v-if="titleData.orderNumber"
				class="margin-top"
				:title="'订单编号：' + titleData.orderNumber"
				:column="4"
				border
			>
				<template #extra>
					<el-button type="info" plain @click="dialogVisible = true">备注订单</el-button>
					<!-- <el-button type="info" plain @click="closeOrder = true">关闭订单</el-button> -->
				</template>
				<el-descriptions-item label="订单来源：">
					{{ titleData.orderSource }}
				</el-descriptions-item>
				<el-descriptions-item label="支付方式：">
					{{ titleData.paymentMethod }}
				</el-descriptions-item>
				<el-descriptions-item label="提交时间：">
					{{ titleData.submitTime }}
				</el-descriptions-item>
				<el-descriptions-item label="订单金额：">
					{{ titleData.paymentFee }}
				</el-descriptions-item>
				<el-descriptions-item label="支付时间：">
					{{ titleData.paymentTime }}
				</el-descriptions-item>
				<el-descriptions-item label="订单状态：">
					{{ titleData.orderStatus }}
				</el-descriptions-item>
				<el-descriptions-item label="所属商户：">
					{{ titleData.companyName }}
				</el-descriptions-item>
			</el-descriptions>

			<div class="box">
				<div class="title">订单详情</div>
			</div>
			<div>
				<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
					<el-table-column prop="orderSource" label="订单来源" align="center"></el-table-column>
					<el-table-column prop="submitTime" align="center" label="提交时间"></el-table-column>
					<el-table-column prop="paymentFee" label="支付费用" align="center"></el-table-column>
					<el-table-column prop="paymentMethod" label="支付方式" align="center"></el-table-column>
					<el-table-column prop="paymentTime" align="center" label="支付时间"></el-table-column>
					<el-table-column prop="orderOddNumbers" label="订单单号" align="center"></el-table-column>
				</el-table>
			</div>
			<!-- <div class="box">
				<div class="title">费用信息</div>
			</div>
			<el-table :data="PriceInfotableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column prop="competeProjectName" label="比赛项目" align="center"></el-table-column>
				<el-table-column prop="money" label="单价" align="center"></el-table-column>
				<el-table-column prop="teamMaxUserNum" label="报名人数" align="center"></el-table-column>
				<el-table-column prop="sum" label="合计" align="center"></el-table-column>
			</el-table> -->
			<div class="box">
				<div class="title">提交用户信息</div>
			</div>
			<el-table :data="emlopyeeData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column prop="name" label="提交用户" align="center"></el-table-column>
				<el-table-column prop="phone" label="手机号" align="center"></el-table-column>
			</el-table>
			<div class="box">
				<div class="title">报名信息</div>
			</div>
			<el-table :data="RegistrationInfoData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column prop="competeName" label="参赛人" />
				<el-table-column prop="competeTel" label="联系电话" />
				<el-table-column prop="teamName" label="所属团队" />
				<el-table-column prop="competeIdNo" label="身份证" />
				<el-table-column prop="sensorNumber" label="感应器" />
				<el-table-column prop="competeTeamName" label="参赛队名" />
				<el-table-column prop="competitionName" label="赛事名称" />
				<el-table-column prop="competitionProjectName" label="参赛项目" />
				<!-- <el-table-column prop="gameBeginTime" label="比赛时间" /> -->
				<el-table-column prop="address" label="比赛地点" />
				<el-table-column prop="registrationStatus" label="状态" />
			</el-table>
		</el-card>
		<el-card style="margin-top: 15px" class="box-card">
			<template #header>
				<div class="card-header">
					<span><b> 操作记录 </b></span>
					<div class="card-header-div">
						<el-date-picker
							v-model="ActionQuery.StartTime"
							type="date"
							placeholder="开始日期"
							format="YYYY/MM/DD"
							value-format="YYYY-MM-DD"
							style="margin-right: 10px"
						/>
						<el-date-picker
							v-model="ActionQuery.EndTime"
							type="date"
							placeholder="结束日期"
							format="YYYY/MM/DD"
							value-format="YYYY-MM-DD"
							style="margin-right: 10px"
						/>
						<el-button type="primary" :icon="Search" @click="handleSearch" :loading="ActionQuery.isSelectSuccess"
							>搜索
						</el-button>
						<!-- <el-button @click="exportData">导出数据</el-button> -->
					</div>
				</div>
			</template>
			<el-table :data="ActionInfoData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column prop="operationTime" label="操作时间" />
				<el-table-column prop="operationName" label="操作者" />
				<el-table-column prop="orderState" label="订单状态" />
				<el-table-column prop="paymentState" label="付款状态" />
				<el-table-column prop="operationDetails" label="操作详情" />
			</el-table>
		</el-card>
		<el-dialog v-model="dialogVisible" title="备注订单" width="30%">
			<el-form ref="ruleFormRef" :rules="rules" :model="form" label-width="120px" label-position="top">
				<el-form-item label="备注" prop="OrderNotes">
					<el-input v-model="form.OrderNotes" maxlength="300" placeholder="输入内容" show-word-limit type="textarea" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="AddOrderNotes(ruleFormRef)">确定</el-button>
					<el-button @click="dialogVisible = true">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

		<el-dialog v-model="closeOrder" title="关闭订单" width="30%">
			<el-form ref="ruleFormRef" :rules="rules" :model="form" label-width="120px" label-position="top">
				<el-form-item label="关闭原因" prop="OrderCloseNotes">
					<el-input v-model="form.OrderCloseNotes" maxlength="300" placeholder="输入内容" show-word-limit type="textarea" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="AddOrderNotes(ruleFormRef)">确定</el-button>
					<el-button @click="closeOrder = true">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { FormInstance, FormRules } from "element-plus";
import { Search } from "@element-plus/icons-vue";
import { useRoute } from "vue-router";
import api from "@/api/modules/paymentOrderInfo";
import { ElNotification } from "element-plus";
const route = useRoute();
const Id = route.query.Id;
const dialogVisible = ref(false);
const closeOrder = ref(false);
const form = reactive({
	OrderNotes: "",
	OrderCloseNotes: "",
	Id: ""
});
const titleData = ref<titleItem>({
	orderNumber: "",
	orderSource: "",
	paymentMethod: "",
	submitTime: "",
	paymentFee: "",
	paymentTime: "",
	orderStatus: "",
	companyID: "",
	companyName: ""
});
const ruleFormRef = ref<FormInstance>();
const PriceInfotableData = ref<PriceInfoTableItem[]>([]);
const rules = reactive<FormRules>({
	OrderNotes: [
		{ required: true, message: "备注内容必填", trigger: "blur" },
		{ max: 300, message: "最大长度300", trigger: "blur" }
	],
	OrderCloseNotes: [
		{ required: true, message: "关闭原因必填", trigger: "blur" },
		{ max: 300, message: "最大长度300", trigger: "blur" }
	]
});

interface TableItem {
	orderSource: string;
	SubmitTime: string;
	PaymentFee: string;
	PaymentMethod: string;
	OrderStatus: string;
	PaymentTime: string;
}
const tableData = ref<TableItem[]>([]);
const handleSearch = () => {
	getOrderInfoList();
};
interface PriceInfoTableItem {
	CompeteProjectName: string;
	Money: string;
	TeamMaxUserNum: number;
	Sum: string;
}
interface titleItem {
	orderNumber: string;
	orderSource: string;
	paymentMethod: string;
	submitTime: string;
	paymentFee: string;
	paymentTime: string;
	orderStatus: string;
	companyID: string;
	companyName: string;
}
interface EmployeeTableItem {
	Name: string;
	Phone: string;
}

const emlopyeeData = ref<EmployeeTableItem[]>([]);

//报名信息表格数据
interface RegistrationInfoTableItem {
	CompeteName: string;
	CompeteTel: string;
	TeamName: string;
	CompeteIdNo: string;
	SensorNumber: string;
	CompeteTeamName: string;
	CompetitionName: string;
	CompetitionProjectName: string;
	GameBeginTime: string;
	Address: string;
	RegistrationStatus: string;
}
const RegistrationInfoData = ref<RegistrationInfoTableItem[]>([]);

//操作记录表格数据
interface ActionInfoTableItem {
	OperationName: string;
	OrderState: string;
	PaymentState: string;
	OperationDetails: string;
	OperationTime: string;
}
const ActionInfoData = ref<ActionInfoTableItem[]>([]);

const GetByPaymentOrderInfoDetailsId = () => {
	api.GetByPaymentOrderInfoDetailsId({ id: Id }).then(res => {
		tableData.value.push(res.result.data);
	});
};
GetByPaymentOrderInfoDetailsId();

const GetPaymentOderInfoTitleById = async () => {
	let { result } = await api.GetPaymentOderInfoTitleById({ id: Id });
	if (!result.data) return;
	titleData.value = result.data;
};
GetPaymentOderInfoTitleById();

const AddOrderNotes = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate(async valid => {
		if (valid) {
			form.Id = Id as string;
			let { result } = await api.AddOrderNotes(form);
			if (result.code != 200) {
				ElNotification({
					title: "数据保存失败",
					message: "数据保存失败",
					type: "error"
				});
				return;
			}
			ElNotification({
				title: "数据保存成功",
				message: "数据保存成功",
				type: "success"
			});
			dialogVisible.value = false;
			closeOrder.value = false;
			getOrderInfoList();
		}
	});
};

const getPriceInfo = () => {
	api.GetPriceInfo({ id: Id }).then(res => {
		PriceInfotableData.value.push(res.result.data);
	});
};
getPriceInfo();

const getCommitEmployee = async () => {
	let { result } = await api.GetCommitEmployee({ id: Id });
	emlopyeeData.value.push(result.data);
};
getCommitEmployee();

const getRegistrationInfo = () => {
	api.GetRegistrationInfo({ id: Id }).then(res => {
		RegistrationInfoData.value = res.result.data;
	});
};
getRegistrationInfo();

const ActionQuery = reactive({
	StartTime: "",
	EndTime: "",
	Id: "",
	isSelectSuccess: false
});

// const exportData = async () => {
// 	ActionQuery.Id = Id as string;
// 	let { result } = await api.ExportActionInfo(ActionQuery);
// 	if (!result.isSuccess) {
// 		ElNotification({
// 			title: "数据导出失败",
// 			message: result.message,
// 			type: "error"
// 		});
// 		return;
// 	}
// 	fetch(import.meta.env.VITE_APP_BASE_URL + result.data.url)
// 		.then(response => response.blob())
// 		.then(blob => {
// 			// 创建一个下载链接元素
// 			const link = document.createElement("a");
// 			link.href = window.URL.createObjectURL(blob);
// 			link.download = "操作记录.xlsx";

// 			// 将元素添加到页面中并触发下载
// 			document.body.appendChild(link);
// 			link.click();
// 			document.body.removeChild(link);
// 		});
// 	ElNotification({
// 		title: "数据导出成功",
// 		message: "数据导出成功",
// 		type: "success"
// 	});
// 	// window.open(import.meta.env.VITE_APP_URL + result.data.url);
// };

const getOrderInfoList = () => {
	ActionQuery.Id = Id as string;
	api.GetOrderInfoList(ActionQuery).then(res => {
		ActionInfoData.value = res.result.data;
	});
};
getOrderInfoList();
</script>

<style lang="scss" scoped>
.order_left {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: flex-start;
	height: auto;
}
.orderBox {
	display: flex;
	justify-content: flex-end;
	width: 80%;
}
.headerBox {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 费用信息 */
.title {
	position: relative;
}
.title::before {
	position: absolute;
	left: -10px;
	width: 5px;
	height: 100%;
	content: "";
	background-color: blue;
}
.div-span {
	font-size: smaller;
	font-weight: bold;
	color: rgb(112 109 109 / 84.2%);
}
.card-header-div {
	display: flex;
	flex-direction: row;
	padding: 10px;
}
.card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.text {
	font-size: 14px;
}
.item {
	margin-bottom: 18px;
}
.box {
	padding: 15px;
}
.box-card {
	width: 100%;
}
.el-row {
	margin-bottom: 20px;
}
.el-row:last-child {
	margin-bottom: 0;
}
.el-col {
	border-radius: 4px;
}
.grid-content {
	min-height: 36px;
	border-radius: 4px;
}
</style>
